import React, { FC, memo, ReactNode, useCallback, useState } from 'react'
import { Button, Calendar, Col, DatePicker, DatePickerProps, Row } from 'antd'
import type { Dayjs } from 'dayjs'
import isSignIcon from '@/assets/img/isSign.svg'
import notSignIcon from '@/assets/img/notSign.svg'
import { Wrapper } from '@/views/main/c-views/sign/daily-attendance/style'
import SearchInput from '@/views/main/c-views/sign/daily-attendance/c-cpns/search-input'
import { encryptData } from '@/utils/encrypt'
import { useMySelector } from '@/store'

interface IProps {
  children?: ReactNode
}

const DailyAttendance: FC<IProps> = (props) => {
  // 日历设置的值
  const [calendarVal, setCalendarVal] = useState<Dayjs>()
  // 签到列表数据
  const [signList, setSignList] = useState<string[]>([])
  // 搜索的用户id
  const [userId, setUserId] = useState<string | number>('')
  // 当前年
  const [curYear, setCurYear] = useState('')
  // 当前月
  const [curMonth, setCurMonth] = useState('')

  const { publicKey } = useMySelector((state) => ({
    publicKey: state.app.publicKey
  }))

  const onYearOrMonthChange: DatePickerProps['onChange'] = (
    date: any,
    dateString
  ) => {
    const year = dateString.split('-')[0]
    const month = dateString.split('-')[1]
    setCurYear(year)
    setCurMonth(month)
    setCalendarVal(date)
  }

  const handleSearchClick = async () => {
    const params = { userId, year: curYear, month: curMonth }
    const encryptStr = encryptData(publicKey, params)
    if (!encryptStr) return
    // const res = await getUserSignRecord(encryptStr)
    // const numbers = res.data
    // console.log(res)
    const numbers = ['09', '04', '02', '10', '11']
    const trimmedNumbers = numbers.map((number) =>
      parseInt(number, 10).toString()
    )
    setSignList(trimmedNumbers)
  }

  const getUserId = useCallback(
    (id: number) => {
      setUserId(id)
    },
    [setUserId]
  )
  // 自定义单元格
  const cellRender = (current: Dayjs) => {
    const day = current.format('D')
    return (
      <img
        width={40}
        src={signList.includes(day) ? isSignIcon : notSignIcon}
        alt=""
      />
    )
  }
  return (
    <Wrapper>
      <Row gutter={[10, 10]}>
        <Col span={4}>
          <SearchInput getUserId={getUserId} />
        </Col>
        <Col span={4}>
          <DatePicker onChange={onYearOrMonthChange} picker="month" />
        </Col>
        <Button type="primary" onClick={handleSearchClick}>
          查询
        </Button>
      </Row>
      <Calendar
        style={{ marginTop: 20 }}
        value={calendarVal}
        headerRender={() => <></>}
        onPanelChange={setCalendarVal}
        disabledDate={() => true}
        cellRender={cellRender}
      />
    </Wrapper>
  )
}

export default memo(DailyAttendance)
